<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片边框</title>
		<!-- 在网页设计中有时候也需要给区域添加一个图片边框 -->
		<style type="text/css">
			div {
				width: 300px;
				height: 300px;
				border-style: solid;
				border-image-source: url(images/4.png);
				/* 设置边框图片路径 */
				border-image-slice: 33%;
				border-width: 41px;
				/* 边框图像 上 右 下 左 侧内偏移量 */
				border-image-outset: 0;
				/* 设置边框图像区域超出边框量 */
				border-image-repeat: repeat;
				/* 设置图片平铺方式 */

				/*
				 border-image 的语法 
				 border-image: source slice/width outset repeat
				 border-image: url(images/4.png) 33%/41px repeat;
				 
				 */
			}
		</style>
	</head>
	<body>
		<div>

		</div>
	</body>
</html>
